<template>
  <div>
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="设备外码(接收端)" prop="distOutCode">
        <el-select
          v-model="addForm.distOutCode"
          placeholder="请选择设备外码(接收端)"
          filterable
          @change="handleFound"
        >
          <el-option
            v-for="item in props.deviceList"
            :key="item.id"
            :label="item.outCode"
            :value="item.outCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备外码Sn" prop="distDeviceSn">
        <el-alert
          :closable="false"
          :type="addForm.distOutCode ? 'info' : 'warning'"
        >
          {{ addForm.distOutCode ? addForm.distDeviceSn : "请选择设备外码" }}
        </el-alert>
      </el-form-item>
      <el-form-item label="状态" prop="isOk">
        <el-radio-group v-model="addForm.isOk">
          <el-radio-button label="启用" :value="1" />
          <el-radio-button label="禁用" :value="2" />
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="fixed bottom-2 right-2">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import { handleApiResponse } from "@/utils/request.js";
import { DataBridgeBind } from "../../../../../wailsjs/go/api/DeviceApi.js";

onMounted(() => {
  if (props.detail.id != 0) {
    addForm.value = cloneDeep(props.detail);
  }
});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {},
  },
  detail: {
    type: Object,
    default: () => {},
  },
  deviceList: {
    type: Array,
    default: () => [],
  },
});

const addFormRef = ref(null);
const addForm = ref({
  distOutCode: "",
  distDeviceSn: "",
  srcDeviceSn: "",
  srcOutCode: "",
  isOk: 1,
});

const loading = ref(false);

const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    let form = cloneDeep(addForm.value);
    form.srcOutCode = props.detailForm.outCode;
    form.srcDeviceSn = props.detailForm.deviceSn;

    if (props.detail.id != 0) {
      form.id = props.detail.id;
    }

    loading.value = true;
    handleApiResponse(() => DataBridgeBind(form)).then((res) => {
      if (res.code == 0) {
        ElMessage.success("操作成功");
        handleCancel(1);
      }
      loading.value = false;
    });
  });
};

const handleCancel = (val = 0) => {
  emit("handleBack", val);
};
// 选择完设备外码后，获取设备Sn
const handleFound = () => {
  addForm.value.distDeviceSn =
    props.deviceList.find((item) => item.outCode == addForm.value.distOutCode)
      .deviceSn || "";
};

const rules = ref({
  distOutCode: [{ required: true, message: "请选择设备外码(接收端)" }],
  distDeviceSn: [{ required: true, message: "请选择设备Sn" }],
  isOk: [{ required: true, message: "请选择状态" }],
});
</script>

<style scoped lang="scss">
</style>